<template>
  <div class="filter-more">
    <div class="from_header">
      <el-form ref="form" label-width="120px">
        <el-form-item label="订单编号：">
          <el-input
            v-model="searchInfo.orderCode"
            size="small"
            placeholder="请输入订单编号"
          />
        </el-form-item>

        <el-form-item label="名称：">
          <el-input
            v-model="searchInfo.picName"
            size="small"
            placeholder="请输入名称"
          />
        </el-form-item>

        <el-form-item label="图号：">
          <el-input
            v-model="searchInfo.picCode"
            size="small"
            placeholder="请输入图号"
          />
        </el-form-item>

        <el-form-item label="状态：" prop="status">
          <el-select
            style="width: 180px;"
            v-model="searchInfo.status"
            size="small"
            clearable
            placeholder="状态"
          >
            <el-option
              v-for="item in statusList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="是否已发送：" prop="isDelivery">
          <el-select
            style="width: 180px;"
            v-model="searchInfo.isDelivery"
            size="small"
            clearable
            placeholder="状态"
          >
            <el-option
              v-for="(label, val) in isDeliveryMap"
              :key="val"
              :label="label"
              :value="+val"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="项次：">
          <el-input v-model="searchInfo.item" size="small" placeholder="请输入项次"/>
        </el-form-item>
        <el-form-item label="工序：">
          <el-input v-model="searchInfo.process" size="small" placeholder="请输入工序"/>
        </el-form-item> -->
      </el-form>

      <div class="establish">
        <!-- <el-button type="primary" size="small" @click="newly">新增</el-button> -->
        <el-button type="primary" size="small" @click="selected"
          >查询</el-button
        >
        <el-button plain size="small" @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
// import { Message } from 'element-ui';

export default {
  model: {
    prop: "searchInfo"
  },
  props: {},
  data() {
    return {
      statusList: [
        {
          id: 1,
          name: "未开始"
        },
        {
          id: 21,
          name: "已派单"
        },
        {
          id: 23,
          name: "已派单-已外协"
        },
        {
          id: 24,
          name: "供应商竣工"
        },
        {
          id: 3,
          name: "生产中"
        },
        {
          id: 4,
          name: "待品检"
        },
        {
          id: 41,
          name: "报废"
        },
        {
          id: 42,
          name: "可维修"
        },
        {
          id: 5,
          name: "品检中"
        },
        {
          id: 51,
          name: "待入库"
        },
        {
          id: 6,
          name: "入库中"
        },
        {
          id: 7,
          name: "出库中"
        },
        {
          id: 8,
          name: "已完成"
        }
      ],
      isDeliveryMap: {
        0: "否",
        1: "是"
      },
      searchInfo: {
        orderCode: "",
        picCode: "",
        picName: "",
        status: "",
        isDelivery: ""
        // item: '',
        // process: ''
      }
    };
  },
  mounted() {},
  methods: {
    selected() {
      this.$emit("selected", this.searchInfo);
    },
    // 重置
    reset() {
      this.searchInfo = {
        orderCode: "",
        picCode: "",
        picName: "",
        status: ""
        // item: '',
        // process: ''
      };
      this.selected();
    },
    // 新增弹框
    newly() {
      this.$emit("add");
    }
  }
};
</script>

<style scoped lang="scss">
.filter-more {
  // width: 90%;
  // margin: 0 auto;
  display: flex;
  flex-direction: column;
  // background: #ccc;
  // border: 1px solid #e8f4fd;
  // padding: 25px 15px;
  .from_header {
    width: 100%;
    height: 100%;

    .el-form-item {
      margin: 10px 30px;
    }

    .el-form {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }
    /deep/ .el-form-item__content {
      display: flex;
    }
  }
  .establish {
    float: right;
  }
}
</style>
